<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <view class="order-item">
            <view class="flex-between">
                <view class="border-bottom">退货商品</view>
            </view>
            <view class="order-item-main" @click="goInventory">
                <view class="order-item-imgs">
                    <view class="img-item" v-for="(item, index) in listData.slice(0, 1)" :key="index">
                        <view class="order-name">{{ item.ProductName }}</view>
                        <!-- <image :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
						<text class="text-num">x{{item.Number}}{{item.UnitName?item.UnitName:item.RatioUnit}}</text> -->
                    </view>
                </view>
                <view class="flex-column">
                    <view><text>详情</text><uni-icons type="arrowright"></uni-icons></view>
                    <text class="order-kind">({{ listData.length }}种{{ getTotalNum() }}件)</text>
                </view>
            </view>
            <!-- 	<view class="order-item-price">
				<view class="order-desc">
					<text>种类:{{listData.length}}</text>
					<text>数量:{{getTotalNum()}}</text>
				</view>
			</view> -->
            <view class="flex-between">
                <view>商品总额</view>
                <view>¥{{ getTotalPrice() }}</view>
            </view>
            <view class="flex-between" v-if="webInfo.IsSubmitReturnMoney == 1 || webInfo.IsSubmitReturnMoney == 2">
                <view>输入退款金额</view>
                <view class="flex"><text>¥</text><input type="digit" v-model="priceSum" /></view>
            </view>
        </view>
        <view class="order-item order-item-color">
            <view class="flex-between" @click="selType">
                <view>退货配送方式</view>
                <view>{{ PostTypeName }}<uni-icons class="icon-class" type="arrowright"></uni-icons></view>
            </view>
            <view class="flex-between">
                <view>退货仓库</view>
                <view>{{ returnInfo.AddressName }}</view>
            </view>
            <view class="flex-between">
                <view>退货信息</view>
                <view>{{ returnInfo.ContactName }}　{{ returnInfo.ContactTel }}</view>
            </view>
            <view class="flex-between">
                <view>退货地址</view>
                <view style="flex: 1; text-align: right">{{ returnInfo.Address }}</view>
            </view>
            <view class="flex-between">
                <view>退货说明</view>
                <view style="flex: 1; text-align: right" v-if="webInfo.ReturnTip">{{ webInfo.ReturnTip }}</view>
            </view>
        </view>
        <view class="cause">
            <view class="title">退货原因<text>（非必填）</text></view>
            <textarea class="textarea" v-model="remark" placeholder="填写退单原因" />
        </view>
        <view class="cause noMt">
            <view class="title">上传图片<text></text></view>
            <upload-img @chooseImage="upImageList" @del="upImageList"></upload-img>
        </view>
        <view class="bottom-bar">
            <text class="price" v-if="priceSum > 0"
                >退款金额：<text>{{ priceSum }}</text
                >元</text
            >
            <!-- <text class="btn btn-success" @click="goUrl('/pages/order/payResult')">提交退货</text> -->
            <text class="btn btn-success" @click="submitReturn">提交退货</text>
        </view>
        <uni-popup type="bottom" ref="typelistpop" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择配送方式</text></view>
                <scroll-view scroll-y="true" class="add-pay-way-scroll">
                    <view class="pay-way">
                        <view class="pay-way-item" v-for="(item, index) in typeList" @click="selecttype(item, index)">
                            <text>{{ item.Name }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="canceltypelist">取消</button>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import utilsOld from "@/utils/utilsOld.js"
import {
    GetRefundOrderActionList,
    GetRefundOrderTempList,
    RefundOrderActionSubmit,
    RefundOrderTempSubmit,
    GetReturnAddressByOrder,
} from "@/service/api/exChange.js"
import { getRefundOrderTempList } from "@/utils/tempCartUtil.js"
import storage from "@/uni-sub-base/utils/storage.js"
import uploadImg from "@/uni-sub-base/components/common/upload-img.vue"
export default {
    components: {
        uploadImg,
    },
    data() {
        return {
            id: "",
            listData: [],
            priceSum: null,
            remark: "",
            OtherData: {},
            imageList: [],
            webInfo: {},
            typeList: [
                // { Name: "快递物流", ID: 0 },
                // { Name: "商家配送", ID: 1 },
                // { Name: "上门取货", ID: 2 },
            ],
            PostTypeName: "",
            PostType: 0,
            returnInfo: {},
        }
    },
    onLoad(e) {
        this.id = e.id
    },
    mounted() {
        if (this.id) {
            this.GetRefundOrderActionList() //有单退货暂存列表
        } else {
            this.GetRefundOrderTempList() //无单退货暂存列表
        }
        this.webInfo = storage.getCache("webInfo")
        this.GetReturnAddressByOrder()
    },
    methods: {
        GetReturnAddressByOrder() {
            let param = {
                orderId: this.id,
            }
            GetReturnAddressByOrder(param).then((res) => {
                if (res.State == 1) {
                    this.returnInfo = res.Data
					this.typeList = res.Data.PostList
					this.selecttype(this.typeList[0])
					this.typeList.forEach((item) =>{
						if(item.Selected){
							this.selecttype(item)
						}
					})
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        goInventory() {
            var url
            if (this.id) {
                url = "/pages_shop/packet/return/returnInventory?id=" + this.id
            } else {
                url = "/pages_shop/packet/return/returnInventory"
            }
            this.easyGoTo(url)
        },
        getTotalNum() {
            let num = 0
            this.listData.forEach((e) => {
                num += e.Number
            })
            return num
        },
        getTotalPrice() {
            // let num = 0
            // this.listData.forEach((e) => {
            //     num = utilsOld.add(num, utilsOld.mul(e.Number, e.OrgPrice))
            // })
            // return num.toFixed(2)
			return this.OtherData.PriceSum
        },
        GetRefundOrderActionList() {
            GetRefundOrderActionList({ orderId: this.id }).then((res) => {
                if (res.State == 1) {
                    this.listData = res.Data
                    this.OtherData = res.OtherData
                    this.priceSum = this.getTotalPrice()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        GetRefundOrderTempList() {
            GetRefundOrderTempList().then((res) => {
                if (res.State == 1) {
                    this.listData = res.Data
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        submitReturn() {
            if (this.webInfo.IsSubmitReturnMoney == 2) {
                if (!this.priceSum) {
                    uni.showToast({
                        title: "请输入退款金额",
                        icon: "none",
                        duration: 2000,
                    })
                    return
                }
                if (this.priceSum > this.OtherData.RefundPriceSum) {
                    this.easyToast("退款金额不能超过" + this.OtherData.RefundPriceSum)
                    return
                }
            }
            if (this.id) {
                this._RefundOrderActionSubmit()
            } else {
                this._RefundOrderTempSubmit()
            }
        },
        _RefundOrderActionSubmit() {
            let parms = {
                orderId: this.id,
                priceSum: this.priceSum,
                remark: this.remark,
                image: this.imageList,
                postType: this.PostType,
            }
            RefundOrderActionSubmit(parms).then((res) => {
                if (res.State == 1) {
                    this.easyReLaunch("/pages_shop/packet/order/payResult?priceSum=" + this.priceSum)
                    this.upTempCar()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        _RefundOrderTempSubmit() {
            let parms = {
                tempIds: [],
                priceSum: this.priceSum,
                remark: this.remark,
                image: this.imageList,
                postType: this.PostType,
            }
            RefundOrderTempSubmit(parms).then((res) => {
                if (res.State == 1) {
                    this.easyReLaunch("/pages_shop/packet/order/payResult?priceSum=" + this.priceSum)
                    this.upTempCar()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        upTempCar() {
            getRefundOrderTempList().then((res) => {})
        },
        upImageList(e) {
            this.imageList = e
        },
        selType() {
            this.$refs.typelistpop.open()
        },
        selecttype(item, index) {
            this.PostTypeName = item.Name
            this.PostType = item.ID
            this.$refs.typelistpop.close()
        },
        canceltypelist() {
            this.$refs.typelistpop.close()
        },
    },
}
</script>

<style lang="scss" scoped>
@import "style/orderItem.scss";
.flex {
    display: flex;
    align-items: center;
}
.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.container {
    .item {
        padding: $app-page-padding $app-page-padding 0;
    }
    .cause {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: $app-page-padding;
        background: $color-white;
        border-radius: $border-radius-10;
        margin: 0 $app-page-padding;
        .title {
            font-size: $font-size-30;
            font-weight: bold;
            padding: 8rpx 0 32rpx 0;
            color: #000000;
            text {
                font-weight: 400;
                color: #666666;
            }
        }
        .textarea {
            height: 126rpx;
            background: #f7f7fa;
            font-size: $font-size-24;
            font-weight: 400;
            color: #666666;
            width: calc(100% - 40rpx);
            padding: 20rpx;
        }
    }
    .noMt {
        padding-top: 0;
    }
    .bottom {
        padding-left: $app-page-padding;
        display: flex;
        flex-direction: row;
        border-top: solid 1rpx $uni-bg-color-grey;
        align-items: center;
        .num {
            display: flex;
            flex: 1;
            align-items: center;
        }
    }
    .flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: $app-page-padding;
        & > view:first-child {
            font-size: $font-size-30;
            font-weight: bold;
            color: #000000;
            padding: $font-size-30 $app-page-padding;
        }
        text {
            font-size: 36rpx;
            font-weight: 500;
            margin-right: 15rpx;
        }
        input {
            width: 230rpx;
            height: 60rpx;
            text-align: center;
            background: #ffffff;
            border: 1px solid #000000;
            border-radius: 6rpx;
            font-weight: bold;
            color: #fe0000;
        }
    }
    .bottom-bar {
        justify-content: flex-end;
        z-index: 2;
        .price {
            font-size: $font-size-28;
            padding-right: 40rpx;
            text {
                font-size: $font-size-30;
                font-weight: 500;
                color: #fe0000;
            }
        }
    }
}
.border-bottom {
    width: 100%;
    border-bottom: 1rpx solid #e6e6e6;
}
.order-item-main {
    border-color: #e6e6e6 !important;
}
.text-color-3 {
    padding-left: $app-page-padding;
    color: #999;
}
.icon-class {
    margin: 0 !important;
}
.order-item-color {
    .flex-between {
        & > view:last-child {
            color: #666;
            font-size: 26rpx;
        }
    }
}
</style>
